<template lang="">
    <div>
        <headers></headers>

        <titles :title="title"></titles>
        
        <!-- 主体内容 -->
        <div class="main">
            <div class="section">

                <!-- 左侧搜索栏 -->
                <div class="filter">
                    <div class="title">
                        <span>筛选</span>
                        <span class="clear" @click="clearSearchForm">清除</span>
                    </div>

                    <!-- 关键词 -->
                    <div>
                        <span>关键词:</span>
                        <el-input clearable v-model="searchForm.itemsName" placeholder="热搜词"></el-input>
                    </div>

                    <!-- 排序 -->
                    <div>
                        <span>排序:</span>
                        <el-select  v-model="searchForm.sort" slot="prepend" placeholder="请选择">
                            <el-option  label="默认" value=""></el-option>
                            <el-option label="时间" value="2"></el-option>
                            <el-option label="价格" value="1"></el-option>
                        </el-select>
                    </div>

                    <!-- 标签多选框 -->
                    <div>
                        <span>分类:</span>
                        <el-select v-model="searchForm.tag" placeholder="请选择">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="数码" value="数码"></el-option>
                            <el-option label="服装" value="服装"></el-option>
                            <el-option label="书籍" value="书籍"></el-option>
                            <el-option label="美妆" value="美妆"></el-option>
                            <el-option label="饰品" value="饰品"></el-option>
                            <el-option label="箱包" value="箱包"></el-option>
                            <el-option label="运动户外" value="运动户外"></el-option>
                            <el-option label="电子设备" value="电子设备"></el-option>
                            <el-option label="日用百货" value="日用百货"></el-option>
                        </el-select>
                    </div>

                    <div>
                        <el-button @click="searchItems"><i class="el-icon-search"></i> 搜索</el-button>
                    </div>
                </div>

                <!-- 右侧物品展示 -->
                <div class="good">
                    <!-- 商品列表 -->
                    <div class="items" >
                        <div class="item" v-for="(item, index) in idleItems" :key="index" @click="toIdleDetails(item)">
                            <div class="img">
                                <img v-if="item.plist" :src="item.plist[0]" alt="card">
                                <div>
                                    <img src="@/assets/images/svg/star.svg" alt="">
                                    <strong> {{item.hot}}</strong>
                                </div>
                            </div>
                            <div class="info">
                                <div class="name"><span style="font-size: 14px;font-weight:400;color:#795ab5;">#{{item.tag}}#</span> {{item.itemsName}}</div>
                                <div>{{item.itemsDesc.length>13?item.itemsDesc.substring(0,10)+'...':item.itemsDesc }}</div>
                                <div class="price_newPrice">
                                    <span class="price">￥{{item.expectPrice}}</span>
                                </div>
                                <div><i class="el-icon-time"></i> {{item.issueTime}}</div>
                                <div class="buy_heart">
                                    <el-button style="width: 205px;" type="primary">购买</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 分页 -->
                    <div class="page">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="searchForm.current" :page-sizes="[6, 12, 18, 24]" :page-size="searchForm.size"
                            layout="total, sizes, prev, pager, next, jumper" :total="searchForm.total">
                        </el-pagination>
                    </div>
                </div>

            </div>
            <footers></footers>
        </div>
    </div>
</template>
<script>
import { pageIdle } from "../../utils/idle.js";
    export default {
        data() {
            return {
                title:'',
                searchForm: {
                    itemsName: '',
                    sort: '',
                    tag:'',
                    current:1,
                    size:6,
                    total:0,
                },
                idleItems:[],
                params: {
                    userId: "",
                    token: "",
                },
            }
        },
        mounted() {
            const {title} = this.$router.app._route.meta
            this.title = title
        },
        created() {
            this.params.userId = localStorage.getItem("user");
            this.params.token = this.$cookies.get("token");
            this.searchItems();
        },
        methods: {
            searchItems() {
                pageIdle(this.searchForm,this.params).then(res=>{
                    if(res.data.code==200){
                        this.idleItems = res.data.data.records;
                        this.searchForm.current = res.data.data.current;
                        this.searchForm.size = res.data.data.size;
                        this.searchForm.total = res.data.data.total;
                    }else{
                        this.$message.error(res.data.msg);
                    }
                })
            },
            clearSearchForm() {
                this.searchForm.itemsName = '',
                this.searchForm.sort = '',
                this.searchForm.tag = '',
                this.searchItems();
            },
            handleSizeChange(val) {
                this.searchForm.size=val;
                this.searchItems();
            },
            handleCurrentChange(val) {
                this.searchForm.current=val;
                this.searchItems();
            },
            toIdleDetails(val) {
                this.$router.push({
                    name: 'details',
                    query: {
                        id: val.id
                    }
                })
            },
        },
    }
</script>
<style lang="less" scoped>
    @import url('./index.less');
    
</style>